<template>
  <view class="register" id="register">
    <view class="bgc1"></view>
    <view class="bgc2"></view>
    <view class="content-div">
      <view>登陆</view>

      <!-- 家长姓名 -->
      <view>
        <!-- <view class="parent-name">
          <u-input
            v-model="form.name"
            type="text"
            :border="true"
            :height="80"
            :clearable="false"
            border-color="#DCDCDC"
            placeholder="请输入家长姓名"
            :style="{ width: '10rpx' }"
            :custom-style="{ borderRadius: '200rpx' }"
          />
        </view> -->
        <!-- 性别选择 -->
        <!-- <u-radio-group v-model="form.sex">
          <u-radio
            active-color="#0ACC94"
            v-for="(item, index) in list"
            :key="index"
            :name="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group> -->
      </view>
      <!-- 电话号码 -->
      <view>
        <u-input
          v-model="form.phone"
          type="text"
          :border="true"
          :height="80"
          border-color="#DCDCDC"
          placeholder="请输入您的电话号码"
          :custom-style="{ borderRadius: '20rpx' }"
        />
      </view>

      <!-- 验证码 -->
      <view>
        <view class="parent-name">
          <u-input
            v-model="form.code"
            type="number"
            :border="true"
            :height="80"
            border-color="#DCDCDC"
            placeholder="请输入验证码"
            :custom-style="{ borderRadius: '20rpx' }"
          />
        </view>
        <u-button
          :custom-style="customStyle"
          @click="getCode"
          :disabled="smsDisable"
          >{{ smsDisable == true ? smsButtonMsg : "获取验证码" }}</u-button
        >
      </view>

      <!-- 协议 -->
      <view class="protocol">
        <view> 授权即代表同意 </view>
        <view class="user-protocol"> 《云动宝用户使用协议》 </view>
      </view>

      <u-button
        type="success"
        :style="{ fontSize: '32rpx' }"
        @getuserinfo="regist"
        open-type="getUserInfo"
        >同意协议并登陆</u-button
      >
      <!-- <view class="pass" @click="toIndex"> 跳过 </view> -->
    </view>

    <u-toast ref="regist" />
  </view>
</template>

<script>
import { randomString, jugeIsPhone } from "@/common/utils";
export default {
  data() {
    return {
      form: {
        // name: "",
        phone: "",
        code: "",
        // sex: 1,
      },

      theSendCode: "", //验证码 后端返回来的
      //获取验证码 按钮颜色
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        width: "240rpx",
      },
      list: [
        {
          name: "男",
          disabled: false,
          value: 1,
        },
        {
          name: "女",
          disabled: false,
          value: 2,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      sexChoose: "男",
      timer: "", //倒计时
      smsDisable: false, //是否可以点击
      smsButtonMsg: "",
    };
  },
  methods: {
    /**
     * 跳转到首页
     */
    toIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },

    /**
     * 发送短信
     */
    getCode() {
      //p判断 手机号是否填写
      if (this.form.phone.length === 0 || this.form.phone === "") {
        this.$refs.regist.show({
          title: "手机号不能为空哦!",
          type: "error ",
        });
      } else if (!jugeIsPhone(this.form.phone)) {
        this.$refs.regist.show({
          title: "请输入正确的手机号哦!",
          type: "error ",
        });
      } else {
        this.$u.api
          .smsApi({ phone: this.form.phone })
          .then((res) => {
            uni.showToast({
              title: "发送成功",
              duration: 2000,
              icon: "none",
            });

            //这里进行倒计时
            var time = 60;
            this.timer = setInterval(() => {
              if (time >= 1) {
                time = time - 1;
                this.smsDisable = true;
                this.smsButtonMsg = time + "S重新获取";
              } else {
                clearInterval(this.timer);
                this.smsDisable = false;
              }
            }, 1000);

            this.theSendCode = res.data;
          })
          .catch((err) => {
            this.$refs.regist.show({
              title: "验证码发送失败！",
              type: "error ",
            });
          });
      }
    },

    /**
     * 注册
     */
    regist() {
      // if (this.form.name.length === 0 || this.form.name === "") {
      //   //p判断 姓名是否填写
      //   this.$refs.regist.show({
      //     title: "家长姓名不能为空哦!",
      //     type: "error ",
      //   });
      //   return;
      // }
      if (this.form.phone.length === 0 || this.form.phone === "") {
        //p判断 手机号是否填写
        this.$refs.regist.show({
          title: "手机号不能为空哦!",
          type: "error ",
        });
        return;
      }
      if (!jugeIsPhone(this.form.phone)) {
        this.$refs.regist.show({
          title: "请输入正确的手机号哦!",
          type: "error ",
        });
      }
      if (this.form.code.length === 0 || this.form.code === "") {
        //p判断 验证码是否填写
        this.$refs.regist.show({
          title: "验证码不能为空哦!",
          type: "error ",
        });
        return;
      }
      if (this.form.code.length > 0 && this.form.code < 6) {
        //p判断 验证码是否填写
        this.$refs.regist.show({
          title: "验证码不正确哦!",
          type: "error ",
        });
        return;
      }
      // if (parseInt(this.form.code) != this.theSendCode) {
      //   //p判断 验证码是否填写
      //   this.$refs.regist.show({
      //     title: "验证码不正确哦!",
      //     type: "error ",
      //   });
      //   return;
      // }

      //获取用户信息&&注册
      this.WxLogin().then(() => {
        return this.register();
      });
    },

    /**
     * 微信小程序登录获取信息
     */
    WxLogin() {
      var _this = this;
      return new Promise((resolve) => {
        uni.login({
          provider: "weixin",
          success: function (loginRes) {
            console.log(loginRes);
            // 存储code给后端
            _this.form.w_code = loginRes.code;
            // 获取用户信息
            uni.getUserInfo({
              provider: "weixin",
              success: function (res) {
                // 存储 头像
                _this.form.avatar = res.userInfo.avatarUrl;
                resolve();
              },
            });
          },
        });
      });
    },

    /**
     * 注册 后端接口请求
     */
    register() {
      this.$u.api.userRegisterApi(this.form).then((res) => {
        this.form.code = undefined;
        this.form.type = res.data.type;
        this.form.token = res.data.token;
        this.form.id = res.data.id;
        this.form.is_check = res.data.is_check;
        this.form.baby_id = res.data.baby_id;
        this.form.extra_id = res.data.extra_id;
        this.form.expire = res.data.expire;
        //村缓存
        this.$u.vuex("vuex_userInfo", this.form);

        // 这里需要判断 是否选择角色
        // if (res.data.profile_status === 2) {
        //   uni.navigateTo({
        //     url: "/pages/identifiy/identifiy",
        //   });
        // } else {
        //   uni.switchTab({
        //     url: "/pages/index/index",
        //   });
        // }
        uni.navigateTo({
          url: "/pages/identifiy/identifiy",
        });
      });
    },
  },
  onLoad(option) {
    // 是否已经登录
    // if (this.vuex_userInfo.hasOwnProperty("id")) {
    //   uni.reLaunch({
    //     url: "/pages/common/Bar",
    //   });
    // }
  },
};
</script>

<style scoped lang ='scss' >
.register {
  height: 100vh;
  background-color: #f7f7f7;
  /* padding: 0 15rpx; */
  .bgc1 {
    height: 105rpx;
    background-color: #0acc94;
  }
  .bgc2 {
    height: 50.5 * 1.5rpx;
    background-color: #0acc94;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  .content-div {
    /* position: absolute;
    top: 70rpx; */
    height: 90vh;
    margin: -60 * 2rpx 30rpx 0 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    padding: 30rpx 15 * 2rpx;
    & > view {
      margin: 20rpx 0;
      &:nth-child(1) {
        font-size: 18 * 2rpx;
        color: #000000;
        font-weight: 700;
        margin-bottom: 40rpx;
      }
      &:nth-child(2),
      &:nth-child(4) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .parent-name {
        width: 185 * 2rpx;
      }
    }
    .protocol {
      color: #999999;
      font-size: 26rpx;
      margin-top: 200rpx;
      margin-bottom: 50rpx;
      display: flex;
      flex-basis: row;
      align-items: center;
      justify-content: center;
      .user-protocol {
        color: #11cc9d;
      }
    }
    .pass {
      font-size: 32rpx;
      margin-top: 20rpx;
      color: #11cc9d;
      text-align: center;
    }
  }
}
</style>
